import React, {useState} from 'react';
import {
  Text,
  View,
  Button,
  StyleSheet,
} from 'react-native';

import {pick} from '@react-native-documents/picker';

function FilePicker(): React.JSX.Element {
  const [filePath, setFilePath] = useState<string | null>(null);
  const onSelectFile = async () => {
    try {
      const [file] = await pick();
      setFilePath(file.uri);
    } catch (err) {
      console.log('Unknown error: ', err);
    }
  };
  return (
    <View>
      <Text style={styles.text}>Selected File:</Text>
      <Text style={styles.text}>
        {filePath ? filePath : 'No file selected'}
      </Text>
      <Button title="Select File" onPress={onSelectFile} />
    </View>
  );
}

export default function(): React.JSX.Element {
  return (
    <View style={styles.container}>
      <View>
        <FilePicker />
      </View>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {fontSize: 18, marginBottom: 10},
});

